<template>
  <div class="content">
    <slot />

    <el-tag
      class="name-tag"
      size="medium"
      closable
      v-for="item in selectItems"
      :key="item.id"
      type="info"
      @close="handleDelete(item.id)"
    >{{ item.name }}</el-tag
    >

    <i class="el-icon-plus" @click="handleAdd"></i>

    <OrganizationTreeSelect
      ref="OrganizationTreeSelect"
      :title="$t('sys.organizational_structure')"
      :list="treeData"
    />
  </div>
</template>

<script>


import lodash from 'lodash'
import { arrayToTree } from '@/utils/util'
import { postHmusergroupcomponent } from '@/apis/paas/HmUserGroupComponentController.js'
import { getHmorgListwithpermission } from '@/apis/paas/HmOrgController.js'
import OrganizationTreeSelect from './OrganizationTreeSelect.vue'

export default {
  name: 'OrganizationVisibilityRange',
  components: {
    OrganizationTreeSelect
  },

  data () {
    return {
      treeData: [] // 所有组织架构
    }
  },
  props: {
    selectItems: {
      type: Array,
      default: () => []
    }
  },
  created () {},

  computed: {
    ids () {
      return this.selectItems.map((item) => item.componentId + '')
    }
  },

  methods: {
    handleAdd () {
      getHmorgListwithpermission().then((res) => {
        this.treeData = arrayToTree(res)
      })

      this.$refs.OrganizationTreeSelect.open({ ids: this.ids }, (data) => {
        if (data && data.length) {
          const formData = {
            components: data.map((id) => {
              return {
                businessType: 'ORGANIZATION',
                id
              }
            }),
            type: 1,
            userGroupId: this.$attrs.group.id
          }
          postHmusergroupcomponent(formData).then(() => {
            this.$message.success(this.$t('sys.operation_success'))
            this.$emit('add')
          })
        }
      })
    },

    handleDelete (id) {
      this.$emit('delete', id)
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 0;
  //border-bottom: 1px dashed #ccc;
}

.name-tag {
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.el-icon-plus {
  font-size: 18px;
  color: #409eff;
  font-weight: bold;
  cursor: pointer;
}
</style>
